<template>
	<view class="container">
		<view class="logobox">
			<image :src="$IMG_URL+'login/logo.png'" mode="aspectFit" class="logo" style=""></image>
		</view>
		<view class="loginbox">
			<view class="form">
				<view class="mobile">
					<image :src="$IMG_URL+'login/mobile.png'" mode="aspectFit" class="icon"></image>
					<u-input placeholder="请输入手机号" placeholderClass="placeholderClass" maxlength="11" border="none" class="input" type='number'
						v-model="phone" clearable ></u-input>
				</view>
				<view class="line">
					<u-line color="#EEEEEE"></u-line>
				</view>
				<view class="password" v-if="loginType=='password'">
					<image :src="$IMG_URL+'login/password.png'" mode="aspectFit" class="icon"></image>
						<!-- -->
					<u-input :type="type" placeholder="请输入密码(6~12位字母+数字)" placeholderClass="placeholderClass"
						v-model="password" border="none" class="input" clearable v-if="eyeType==false" style='height: 50rpx;'></u-input>
					<input type="text" placeholder="请输入密码(6~12位字母+数字)" class="input2"  v-else v-model="password" placeholderClass="placeholderClass" lass="input" >
					<image src="../../static/images/ere.png" mode="" class="image_666" @click="openEye" v-if="eyeType==true"></image>
					<image src="../../static/images/eres.png" mode="" class="image_666" @click="closeEye" v-else></image>
				</view>
				
				<view class="codebox" v-if="loginType=='code'">
					<image :src="$IMG_URL+'login/code.png'" mode="aspectFit" class="icon"></image>
					<u-input type="number" placeholder="请输入验证码" placeholderClass="placeholderClass" border="none"
						v-model="yzmnval" class="input" clearable></u-input>
					<text v-if='showText==true' class="text" @click="getYZM">获取验证码</text>
					<view v-else class="send">{{second}}s重新发送</view>
				</view>
				<view class="line">
					<u-line color="#EEEEEE"></u-line>
				</view>
				<view class="code">
					<text class="text blue" v-if="loginType=='password'" @click="loginType='code'">验证码登录</text>
					<text class="text black" v-if="loginType=='code'" @click="loginType='password'">密码登录</text>
				</view>
				<view class="login" @click="tologin">
					<text class="text">登录</text>
				</view>
			</view>
		</view>
		<view class="action">
			<view class="other">
				<text @click="goForget">忘记密码</text>
			</view>
		</view>
		<!-- <view class="u-flex u-row-center u-col-center quicklogin">
			<u-line length="83"></u-line><text class="text">快捷登录</text>
			<u-line length="83"></u-line>
		</view> -->
		<!-- <view class="wechat">
			<image @click="loginWechat('wechat')" :src="$IMG_URL+'login/wechat.png'" mode="aspectFit"
				class="wechat-logo">
			</image>
		</view> -->
		<view class="agreement">
			<u-checkbox-group v-model="checked">
				<u-checkbox shape="circle"></u-checkbox>
			</u-checkbox-group>
			<text>已阅读并同意</text> <text class="black" @click="regAgreement">《用户注册协议》</text>与<text class="black"
				@click="agreement">《隐私政策》</text>


		</view>
		<!-- <u-popup :show="uploadloading" mode="center" @close="loadingclose">
			<u-loading-icon></u-loading-icon>
		</u-popup> -->
		<u-overlay :show="uploadloading" @click="uploadloading = false" class="u-flex u-row-center u-col-center">
			<view>
				<u-loading-icon size="30" :textSize="15" text="登录中..." textColor="white" :vertical="true" color="white">
				</u-loading-icon>
			</view>
		
		</u-overlay>
		
	</view>
</template>

<script>
	import {
		mapMutations,
		mapActions,
		mapState,
		mapGetters
	} from 'vuex';
	// 调用微信登录方法
	import wechat from '@/shop/wechat/wechat';
	export default {
		components: {},
		data() {
			return {
				checked: [],
				type: 'password',
				loginType: 'password',
				showText: true,
				second: 60,
				phone: '',
				password: '',
				token: '',
				contentType: '',
				yzmnval: '',
				uploadloading:false,
				eyeType:false,
				toastType:false
			}
		},
		onLoad() {

		},
		methods: {
			...mapActions(['getUserInfo']),
			goReg() {
				uni.navigateTo({
					url: "/pages/login/reg"
				})
			},
			openEye(){
				// 开
				console.log(this.password)
				this.eyeType=false;
			},
			closeEye(){
				// 关
				this.eyeType=true;
			},
			loadingclose(){
				this.uploadloading=false
			},
			goForget() {
				uni.navigateTo({
					url: "/pages/login/forget"
				})
			},
			goOauth() {
				uni.navigateTo({
					url: '/pages/login/oauth'
				})
			},
			regAgreement() {
				uni.navigateTo({
					url: "/pages/login/regAgreement"
				})
			},
			agreement() {
				uni.navigateTo({
					url: "/pages/login/agreement"
				})
			},
			getYZM() {
				this.password ='';
				if (this.phone.length <= 0) {
					uni.showToast({
						title: '请填写手机号',
						icon: 'error'
					})
					return;
				}
				this.showText = false;
				var interval = setInterval(() => {
					let times = --this.second
					this.second = times < 10 ? '0' + times : times //小于10秒补 0
				}, 1000)
				setTimeout(() => {
					clearInterval(interval)
					this.second = 60
					this.showText = true
				}, 60000)
				this.$http('ours.getYZM', {
					phone: this.phone
				}).then(res => {
					if (res.code == 200) {
						uni.showToast({
							icon: 'none',
							title: res.msg
						})
						this.yzmnval = res.data
					} else {
						uni.showToast({
							title: res.msg,
							icon: 'error'
						})
					}
				})
			},
			tologin() {
				
				let reg = new RegExp(/^(?![^a-zA-Z]+$)(?!\D+$)/);
				if (this.checked.length == 0) {
					uni.showToast({
						title: '请勾选协议',
						icon: 'error'
					});
					return;
				}
				if (this.phone == '') {
					this.$u.toast('请输入手机号');
					return;
				} else {
					if (!uni.$u.test.mobile(this.phone)) {
						this.$u.toast('手机号码格式错误');
						return;
					}
				}
				if (this.loginType == 'code') {
					if (this.yzmnval == '') {
						this.$u.toast('请输入验证码');
						return;
					}
				} else {
					if (this.password == '' || this.password.length < 6) {
						this.$u.toast('密码格式错误,至少6位(字母+数字)');
						return;
					} else {
						if (reg.test(this.password)) {} else {
							this.$u.toast('密码格式错误,至少6位(字母+数字)');
							return;
						}
					}
				}

                this.uploadloading=true;
				let date = {
					code: this.yzmnval,
					password: this.password,
					phone: this.phone,
					type: '2'
				};

				this.$http('common.login', date).then(res => {
					if (res.code == 200) {
					
						this.token = res.data.token;
					
						// console.log(res.data.roleType);
						this.getUserInfo({
							token: res.data.token,
							roleType: res.data.roleType
						}).then(r => {
							setTimeout(() =>{
								this.uploadloading=false;
								// if(r.code==200){
								uni.switchTab({
									url: '/pages/index'
								});
							}, 1000);
							// 	this.uploadloading=false;
							// // if(r.code==200){
							// uni.switchTab({
							// 	url: '/pages/index'
							// });
							// // }
						});
					} else {
						this.uploadloading=false;
						this.$u.toast(res.msg);
						return;
					}

				})
				return;
			},
			
			// 微信授权登录
			// 第三方登录
			async loginWechat(provider) {
				// if (!this.protocol) {
				// 	this.$u.toast('请同意用户协议');
				// 	return false;
				// }
				const that = this;
			    let res=''
				switch (provider) {
					case 'wechat':
						res = await wechat.login();
						break;
					case 'alipay':
						break;
					case 'apple':
						res = await apple.appleIdOauth();
						break;
					default:
						break;
				}
				if (res) {
					if(res.isFirstWxLogin==1)
					{
						uni.navigateTo({
							url:"/pages/login/bindWechat?unionid=" + res.unionId+"&openId="+res.openId
						})
					}else{
						if(res.token)
						{
							 that.getUserInfo(res.token);
							 this.$store.dispatch('setHomeIndex', 0);
							 uni.switchTab({
							 	url:'/pages/index/my'
							 })
						}else{
							uni.showToast({
								icon: 'none',
								title: "数据异常"
							});
						}
						
					}
					// that.closeAuthModal();
					
				}
			},
		}
	}
</script>

<style scoped lang="scss">
	@import './login.scss';

	.send {
		color: #666;
	}
	.image_666{
		width: 40rpx;
		height: 40rpx;
	}
	uni-input{
		width: 90%;
		margin-left: 30rpx;
	}
	// .password 
	.input2{
		border: 0 none;
		width: 80%;
		height: 50rpx;
		font-size: 30rpx;
		outline: 0 none;
		margin-left: 30rpx;
		margin-right: 20rpx;
	}
</style>
